<template>
    <div class="index">
        <!-- 侧边栏 -->
        <div class="aside">
            <div class="logo">
                <img src="/img/logo.jpg">
                <div class="h2">原神后台</div>
            </div>
            <div class="index_btn" :class="{active:cur=='index'}" @click="goHome">后台首页</div>
            <div class="h4">数据管理</div>
            <el-menu background-color="#2A3F54" router active-text-color="#fff" text-color="#fff" :unique-opened="true">
                <el-submenu index="1" :class="{active:cur=='Userlist'}" >
                    <span slot="title" @click="cur='Userlist'">用户管理</span>
                    <el-menu-item index="Userlist">用户列表</el-menu-item>
                </el-submenu>
                <el-submenu index="2" :class="{active:cur=='2'}">
                    <span slot="title" @click="cur='2'">新闻管理</span>
                    <el-menu-item index="add_news">添加新闻</el-menu-item>
                    <el-menu-item index="news_list">新闻列表</el-menu-item>
                </el-submenu>
                <el-submenu index="3" :class="{active:cur=='3'}">
                    <span slot="title" @click="cur='3'">账号管理</span>
                    <el-menu-item index="update_password">修改密码</el-menu-item>
                    <el-menu-item index="add_admin">添加管理员账号</el-menu-item>
                    <el-menu-item index="adminList">管理账号列表</el-menu-item>
                </el-submenu>
            </el-menu>
            <!-- 底部 -->
            <div class="bottom_btn">
                <div class="quit" @click="quit">退出</div>
            </div>
        </div>
        <!-- 右侧容器 -->
        <div class="container">
            <div class="top">
                <div>当前登录 ： {{ uname=='admin' ? '超级管理员' : uname }}</div>
            </div>
            <div class="middle">
                <!-- 页面部分 -->
                <router-view/>
            </div>
            <div class="bottom">
                <div>原神 —后台管理系统</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cur:this.$route.path.split('/')[2],
                uname:'' //当前登录的管理员账号
            }
        },
        methods:{
            goHome(){
                this.cur='index'
                if (this.$route.path != '/loginsucc/index'){
                    this.$router.push('/loginsucc/index')
                }
            },
            // 退出登录
            quit(){
                sessionStorage.removeItem('uname')
                alert('退出成功')
                this.$router.push('/login')
            }
        },
        mounted(){
            this.uname=sessionStorage.getItem('uname')
        }
    }
</script>

<style lang="scss" scoped>
.index {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    .aside {
        color: #fff;
        background-color: #2A3F54;
        user-select: none;
        height: 100%;
        width: 270px;
        position: relative;
        .logo {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            padding-bottom: 30px;
            img {
                padding-right: 20px;
            }
            .h2 {
                font-size: 1.8em;
            }
        }
        .h4 {
            color: #fff;
            font-weight: bold;
            font-size: .9em;
            padding-top: 40px;
            padding-bottom: 30px;
            padding-left: 10px;
        }
        .index_btn {
            padding: 15px 0 15px 20px;
            cursor: pointer;
            font-size: .9em;
            &:hover {
                background-color: #35495D;
            }
        }
        ::v-deep .el-submenu__title {
            span {
                display: block;
            }
        }
        ::v-deep .el-menu-item {
            &.is-active {
                background-color: #35495D !important;
            }
        }
        ::v-deep .el-submenu__title:hover {
            background-color: #2a3f54 !important;
        }
        ::v-deep .el-menu-item:hover{
            background-color: #35495D !important;
        }
        ::v-deep * {
            &.active {
                color: #fff;
                border-right: 6px solid #1ABB9C;
                background-image: linear-gradient(0deg,#2C4257 0%,#334556 100%);
                border-bottom: 2px solid #1F2F3F;
                border-top: 2px solid #536271;
            }
        }
        .bottom_btn {
            height: 35px;
            background-color: #172d44;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            .quit {
                text-align: center;
                cursor: pointer;
                width: 60px;
                line-height: 35px;
                height: 100%;
                &:hover {
                    background-color: #425567;
                }
            }
        }
    }
    .container {
        user-select: none;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        .top {
            flex-basis: 56px;
            border-bottom: 2px solid #D9DEE4;
            background-image: linear-gradient(180deg,#ededed 0%,#EDEDED 100%);
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 50px;
            color: #515356;
        }
        .middle {
            flex: 1;
            background-color: #F7F7F7;
        }
        .bottom {
            flex-basis: 40px;
            display: flex;
            justify-content: flex-end;
            background-color: #fff;
            align-items: center;
            >div {
                user-select: none;
                padding-right: 50px;
                font-size: .9em;
                color: #73879c;
            }
        }
    }
}
</style>